<template>
  <el-pagination
    v-if="total>10"
    class="pms-pagination"
    style="margin-top: 20px;"
    :current-page.sync="currentPage"
    :page-size.sync="pageSize"
    :layout="layout"
    :total="total"
    v-bind="$attrs"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  >
    <div key="sizes">
      <el-select
        v-model="sizesVal"
        :popper-append-to-body="isPopperBody"
        size="mini"
        class="pms-zr-pageSizes"
        placeholder="请选择"
        @change="sizesChange"
      >
        <el-option v-for="item in sizesList" :key="item.key" :label="item.label" :value="item.key" />
      </el-select>
    </div>
  </el-pagination>
</template>

<script>
export default {
    name: 'Pagination',
    props: {
        total: {
            required: true,
            type: Number
        },
        page: {
            type: Number,
            default: 1
        },
        limit: {
            type: Number,
            default: 10
        },
        pageSizes: {
            type: Array,
            default() {
                return [10, 20, 30, 50]
            }
        },
        layout: {
            type: String,
            default: 'prev, pager, next, jumper, total, slot'
            // default: 'total, sizes, prev, pager, next, jumper'
        },
        isPopperBody: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            sizesVal: 10,
            sizesList: []
        }
    },
    computed: {
        currentPage: {
            get() {
                return this.page
            },
            set(val) {
                this.$emit('update:page', val)
            }
        },
        pageSize: {
            get() {
                return this.limit
            },
            set(val) {
                this.$emit('update:limit', val)
            }
        }
    },
    watch: {
        pageSizes: {
            immediate: true,
            handler(newVal) {
                this.sizesList = newVal.map(item => ({
                    key: item,
                    label: `${item}条/页`
                }))
            },
            deep: true
        },
        limit: {
            immediate: true,
            handler(newV) {
                this.sizesVal = newV
            }
        }
    },
    created() {
       console.log('1512123132')
    },
    methods: {
        handleSizeChange(val) {
            this.$emit('pagination', { page: this.currentPage, limit: this.sizesVal })
        },
        handleCurrentChange(val) {
            this.$emit('pagination', { page: val, limit: this.sizesVal })
        },
        sizesChange() {
            this.$emit('update:page', 1)
            this.$emit('update:limit', this.sizesVal)
            this.$emit('pagination', { page: 1, limit: this.sizesVal })
        }
    }
}
</script>

<style lang="scss" scoped>
.el-select-dropdown__item {
    width: 80px;
}
</style>
